<script setup lang="ts">
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('')
onMounted(function (): void {
  barTitleStore().setTitle('修改密码')
})
const isSamePassword = (value:string):boolean => {
  return value===newPassword.value;
}
const onSubmit = (values: any) => {
  console.log(typeof values);
  delete values.confirmPassword;
  console.log('submit', values);
  cFetch('/account/api/modifyPassword',{
    auth:true,
    defaultOpts:{
      method: 'POST',
      body:values
    }
  }).then((res) => {
    if(res.code===200){
      showToast('密码重置成功')
      oldPassword.value = ''
      confirmPassword.value = ''
      newPassword.value = ''
    }
  })
};
</script>

<template>
  <van-form @submit="onSubmit" style="margin-top: 1rem">
    <van-cell-group inset>
      <van-field
          v-model="oldPassword"
          name="password"
          label="旧密码"
          type="password"
          :rules="[{ required: true, message: '请填写旧密码' }]"
      />
      <van-field
          v-model="newPassword"
          type="password"
          name="newPassword"
          label="新密码"
          :rules="[
              { required: true, message: '请填写新密码' },
              {
                pattern:/^[a-zA-Z0-9]+$/,
                message:'密码只能由数字和字母组成'
              },
              {
                pattern:/^.{4,14}$/,
                message:'新密码的长度需要在 4 ~ 14 位'
              }
              ]"
      />
      <van-field
          v-model="confirmPassword"
          type="password"
          name="confirmPassword"
          label="确认新密码"
          :rules="[
              { required: true, message: '请确认新密码' },
              {
                validator: isSamePassword,
                message:'两次密码不一致',
              }
              ]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        确认修改
      </van-button>
    </div>
  </van-form>
</template>

<style scoped>

</style>